<template>
  <div class="inlanddiscount">
    <div class="discount">
        <div class="discount-title clearfix">
          <router-link
          to="/" tag="span"
          class="mui-icon mui-icon-arrowleft"></router-link>
          <h2 class="">国内折扣</h2>
        </div>
    </div>
    <div class="content">
      <ul>
        <li v-for="(item ,index) in islandDiscountList" :key="index">
          <router-link :to="'/islandInfo/productid='+item.productId">
            <div>
              <img :src="imgUrl(index)" alt="">
            </div>
            <p class="p1">
              {{item.productName}}
            </p>
            <p class="p2">
              {{item.productPrice}}
            </p>
            <p class="p3">
              <span>{{item.productFrom}}</span>
              |
              <span>{{item.productTime}}</span>
            </p>
          </router-link>
        </li>
      </ul>
    </div>
    <mm-footer></mm-footer>
  </div>
</template>
<script>
import mmFooter from "./publicComponents/mmFooter.vue"
export default {
  data() {
    return {
      islandDiscountList: []
    }
  },
  created() {
    this.getDiscountList()
  },
  methods: {
    getDiscountList() {
      this.$http.get('api/getinlanddiscount').then((res) => {
        this.islandDiscountList = res.body.result
        // console.log(res.body.result)
      })
    },
    imgUrl(i) {
      var href = ''
      this.islandDiscountList.forEach((item ,index) => {
        if(i === index) {
          href = item.productImg.slice(item.productImg.indexOf('"')+1,item.productImg.indexOf(' alt')-1)
         return
        }
      })
      return href
    }
  },
  components: {
    mmFooter
  }
}
</script>
<style lang="less" scoped>
@import "../../src/less/var";
.inlanddiscount{
  .discount-title {
    height: 98 / @base;
    padding: 10 / @base 15 / @base;
    background-color: #ff9e20;
    position: relative;
    h2 {
      font-size: 28 / @base;
      height: 100%;
      line-height: 70 / @base;
      margin: 0;
      text-align: center;
      margin: 0 auto;
    }
    span {
      font-size: 40 / @base;
      height: 100%;
      line-height: 70 / @base;
      position: absolute;
      left: 20/@base;
    }
  }
  .content {
    ul {
      display: flex;
      flex-wrap: wrap;
      background-color: #fff;
      li {
        width: 49%;
        height: 530/@base;
        padding: 20/@base 30/@base 20/@base 35/@base;
        position: relative;
        a {
          display: block;
          div {
            width: 100%;
            height: 285/@base;
            img {
              width: 100%;
              height: 285/@base;
              display: block;
            }
          }
          p {
            margin-bottom: 0;
            &.p1 {
              font-weight: 700;
              font-size: 24/@base;
              line-height: 1.6;
              height: 80/@base;
              color: #000;
              margin-top: 15/@base;
              white-space: initial;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
            }
            &.p2 {
              font-weight: 700;
              color: red;
              margin-top: 20/@base;
              font-size: 20/@base;
            }
            &.p3 {
              position: absolute;
              bottom: 15/@base;
            }
          }
        }
        &:nth-child(2n+1) {
          border-right: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
        }
        &:nth-child(2n) {
          border-bottom: 1px solid #ccc;
        }
      }
    }
  }
}
</style>
